import { ref } from 'vue'
import { appState } from './appManager'

const themeName = 'vueuse-color-scheme'

export const themeList = ref([
    { label: '默认主题', svg: 'themeLight', code: 'light' },
    { label: '沉浸主题', color: '130deg,#050713,#7b7b7b', border: '#979797', code: 'dark' }
])
/**
 * 初始化当前样式
 */
export function initSysTheme() {
    // 只有旧版导航模式显示换肤功能
    if (appState.themeDisabled) return
    let theme = localStorage.getItem(themeName)
    if (!theme)theme = sessionStorage.getItem(themeName)
    changeSystemTheme(theme || 'light', false)
}

/**
 * 切换主题
 * @param value
 * @param save
 */
export function changeSystemTheme(value:string, save = true) {
    document.documentElement.setAttribute('theme', value)
    document.documentElement.setAttribute('class', value)
    appState.theme = value
    if (save) {
        localStorage.setItem(themeName, value)
        sessionStorage.setItem(themeName, value)
    }
}

